<template>
    <div>
      <BaseForm
        ref="searchForm"
        type="search"
        v-model:items="formItems"
        v-model:form="searchParams"
        @search="handleSearch"
      >
        <el-form-item>
          <el-radio-group v-model="dateRadio" @change="dateChange">
            <el-radio-button label="今日" />
            <el-radio-button label="昨日" />
            <el-radio-button label="本周" />
            <el-radio-button label="本月" />
            <el-radio-button label="今年" />
            <el-radio-button label="全部" />
            <el-radio-button label="自定义" />
          </el-radio-group>
        </el-form-item>
      </BaseForm>
  
      <BaseTable
        ref="baseTable"
        :getTableDataFn="reportStatisticsService.opinionKeyRecordPageList"
        :searchParams="searchParams"
        :downLoad="downLoad"
        :serial="true"
        :down="true"
        serialLabel="触发次数排名"
      >
        <el-table-column prop="typeName" label="舆情分类" />
        <el-table-column prop="opinionKey" label="舆情关键词" />
        <el-table-column prop="totalNum" label="触发次数">
          <template #header>
            <span>触发次数</span>
            <SortTable
              :type="1"
              :sortTablekey="sortTablekey"
              @click="handleSort(1)"
              v-model:searchParams="searchParams"
              :handleSearch="handleSearch"
            ></SortTable>
          </template>
        </el-table-column>
        <el-table-column prop="groupNum" label="触发群聊数">
          <template #header>
            <span>触发群聊数</span>
            <SortTable
              :type="2"
              :sortTablekey="sortTablekey"
              @click="handleSort(2)"
              v-model:searchParams="searchParams"
              :handleSearch="handleSearch"
            ></SortTable>
          </template>
          <template #default="scope">
            <el-link
              :underline="false"
              link
              type="primary"
              size="small"
              @click.prevent="openGroupChat(scope.row)"
              >{{ scope.row.groupNum }}</el-link
            >
          </template>
        </el-table-column>
  
        <el-table-column prop="userNum" label="触发客户数">
          <template #default="scope">
            <el-link
              :underline="false"
              link
              type="primary"
              size="small"
              @click.prevent="openGroupChat(scope.row)"
              >{{ scope.row.userNum }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column prop="communityNum" label="相关片区/村社数">
          <template #default="scope">
            <el-link
              :underline="false"
              link
              type="primary"
              size="small"
              @click.prevent="openGroupChat(scope.row)"
              >{{ scope.row.communityNum }}</el-link
            >
          </template>
        </el-table-column>
      </BaseTable>
      <GroupChat
        v-if="visibleGroupChat"
        v-model:dialogVisible="visibleGroupChat"
        :item="item"
      ></GroupChat>
    </div>
  </template>
  
  <script setup lang="ts">
  import SortTable from '@/components/sortTable.vue'
  import GroupChat from './components/GroupChat.vue'
  import { reportStatisticsService } from '@/api/reportStatistics'
  import { commonService } from '@/api/common'
  const cateList = ref([])
  import moment from 'moment'
  const dateRadio = ref('今日')
  const item = ref({})
  const visibleGroupChat = ref(false)
  const dateChange = (val) => {
    switch (val) {
      case '今日':
        searchParams.value.recordTimeBegin = moment().format(
          'yyyy-MM-DD 00:00:00'
        )
        searchParams.value.recordTimeEnd = moment().format('yyyy-MM-DD 23:59:59')
        break
      case '昨日':
        searchParams.value.recordTimeBegin = moment()
          .subtract(1, 'days')
          .format('yyyy-MM-DD 00:00:00')
        searchParams.value.recordTimeEnd = moment()
          .subtract(1, 'days')
          .format('yyyy-MM-DD 23:59:59')
        break
      case '本周':
        searchParams.value.recordTimeBegin = moment()
          .weekday(1)
          .format('yyyy-MM-DD 00:00:00')
        searchParams.value.recordTimeEnd = moment().format('yyyy-MM-DD 23:59:59')
        break
      case '本月':
        searchParams.value.recordTimeBegin = moment().format(
          'yyyy-MM-01 00:00:00'
        )
        searchParams.value.recordTimeEnd = moment().format('yyyy-MM-DD 23:59:59')
        break
      case '今年':
        searchParams.value.recordTimeBegin = moment().format(
          'yyyy-01-01 00:00:00'
        )
        searchParams.value.recordTimeEnd = moment().format('yyyy-MM-DD 23:59:59')
        break
      case '全部':
        searchParams.value.recordTimeBegin = undefined
        searchParams.value.recordTimeEnd = undefined
        break
      default:
        return
    }
    handleSearch()
  }
  const sortTablekey = ref(0)
  const isDesc = ref(null)
  const handleSort = (e) => {
    sortTablekey.value = e
  }
  const formItems = ref([
    {
      name: '',
      key: 'date',
      type: 'datetimerange',
      placeholder: '选择时间范围',
      disabled: computed(() => dateRadio.value !== '自定义'),
    },
    {
      name: '关键词分类',
      key: 'typeId',
      type: 'select',
      options: cateList,
    },
    {
      name: '舆情关键词',
      key: 'opinionKey',
      clearable: true,
      type: 'input',
    },
  ])
  const searchParams = ref({
    typeId: '',
    opinionKey: '',
    recordTimeBegin: moment().format('yyyy-MM-DD 00:00:00'),
    recordTimeEnd: moment().format('yyyy-MM-DD 23:59:59'),
    date: [],
  })
  
  const baseTable = ref(null)
  const handleSearch = (data = { sort: undefined }, e = '') => {
    if (e != 'sort') sortTablekey.value = 0
    if (data) isDesc.value = data.sort
    else {
      isDesc.value = null
    }
    if (data == null) {
      dateRadio.value = '今日'
      searchParams.value.typeId = ''
    }
    const date = searchParams.value.date
    if (dateRadio.value === '自定义') {
      searchParams.value.recordTimeBegin = date[0] || undefined
      searchParams.value.recordTimeEnd = date[1] || undefined
    } else {
      searchParams.value.date = []
    }
    setTimeout(() => {
      baseTable.value.handleSearch({
        ...searchParams.value,
        orderField: sortTablekey.value,
        isDesc: data?.sort,
        date: undefined,
      })
    })
  }
  const downLoad = () => {
    reportStatisticsService
      .downLoad({
        data: {
          ...searchParams.value,
          orderField: sortTablekey.value,
          isDesc: isDesc.value,
          date: undefined,
        },
      })
      .then((res) => {
        var blob = new Blob([res])
        let url = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '舆情报表.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
  }
  const getListByParentKey = () => {
    commonService
      .getListByParentKey({ data: 'cruxKeyManager' })
      .then((res) => {
        let data = res.data.map((e) => {
          return {
            label: e.dictionaryName,
            value: e.dictionaryValue,
          }
        })
        cateList.value.push(...data)
      })
  }
  const openGroupChat = (row) => {
    item.value = { ...row }
    visibleGroupChat.value = true
  }
  onMounted(() => {
    getListByParentKey()
  })
  </script>
  
  <style lang="scss" scoped>
  :deep(.el-date-editor) {
    padding: 1px 10px;
  }
  </style>
  